<template>
  <view class="container">
    <fu-navbar :isBack="true" :title="i18n['我的分销']" :bgColor="colorTheme" color="#ffffff"></fu-navbar>
    <!-- 头部 -->
    <view class="header" :style="[{ height: CustomBar + 'px' }]">
      <view class="tui-msg-box">
        <view url="" class="shop_btn" @tap="handleMoney">{{i18n['规则说明']}}</view>
        <view class="flex flex-sub align-center">
			<view class="block-108 round overHidden">
				<fu-image :src="userInfo.head_img || '/static/logo.png'" mode="aspectFill"></fu-image>
			</view>
          <view class="margin-left">
            <view class="text-xl text-white text-blod">{{ userInfo.user_nickname }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content_data text-white">
      <view class="flex data">
        <view class="select ">
          <view class="current_desc">{{i18n['账户佣金']}}</view>
          <view class="current_money">
            <text class="text-price"></text>
            {{ distributionData.commission || 0  | formatNumber }}
          </view>
        </view>
        <view class="margin-left padding-left ">
          <view class="current_desc">{{i18n['冻结金额']}}</view>
          <view class="current_money">
            <text class="text-price"></text>
            {{ distributionData.freeze_money || 0  | formatNumber}}
          </view>
        </view>
        <view class="margin-left padding-left ">
          <view class="current_desc">{{i18n['账户余额']}}</view>
          <view class="current_money">
            <text class="text-price"></text>
            {{ parseFloat(distributionData.user_money) || 0  | formatNumber}}
          </view>
        </view>
      </view>
      <view class="flex  data">
        <view class="select">
          <view class="desc">{{i18n['昨日收益']}}</view>
          <view class="money">
            <text class="text-price"></text>
            {{ distributionData.yesterday_profit | formatNumber }}
          </view>
        </view>
        <view class="margin-left padding-left">
          <view class="desc">{{i18n['累计收益']}}</view>
          <view class="money">
            <text class="text-price"></text>
            {{ distributionData.total_profit | formatNumber }}
          </view>
        </view>
        <view class="margin-left padding-left">
          <view class="desc">{{i18n['累计提现']}}</view>
          <view class="money">
            <text class="text-price"></text>
            {{ distributionData.total_withdrawal | formatNumber }}
          </view>
        </view>
      </view>
    </view>
    <!-- 九宫格布局 -->
    <view class="content-center">
      <view class="wrapper">
        <view class="box-block" @tap="handleJump" data-url="/pages/distribution/distribution/promoters/index">
          <image :src="imgWechatUrl+'/distribution/card.png'" mode="aspectFit"></image>
          <view class="text-999 desc">{{i18n['我的会员']}}</view>
        </view>
        <view class="box-block" @tap="handleJump" data-url="/pages/distribution/distribution/incomeStatistics/index">
          <image :src="imgWechatUrl+'/distribution/money.png'" mode="aspectFit"></image>
          <view class="text-999 desc">{{i18n['收益统计']}}</view>
        </view>
        <view class="box-block" @tap="handleJump" data-url="/pages/distribution/distribution/promotersOrder/index">
          <image :src="imgWechatUrl+'/distribution/order.png'" mode="aspectFit"></image>
          <view class="text-999 desc">{{i18n['订单统计']}}</view>
        </view>
      </view>
    </view>
    <!-- 规则说明 -->
    <fu-popup ref="coupon" mode="center" width="550rpx" height="700rpx" border-radius="8" :mask-close-able="true" v-model="couponModel" @close="handleClose">
      <view class="rule-box">
        <view class="rule-box-title solid-bottom">
          {{i18n['分销规则']}}
        </view>
        <scroll-view class="rule-box-content" scroll-y>
          <jyf-parser :html="rulers.content"></jyf-parser>
        </scroll-view>
        <view class="rule-box-close solid-top" @click="handleClose">
          {{i18n['关闭']}}
        </view>
      </view>
    </fu-popup>
    <button class="bottom-action cu-btn round text-white bg-theme " @tap="handleJump" data-url="/pages/wallet/withdraw/index">{{i18n['立即提现']}}</button>
    <!-- 网络监测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>
<script>
export default {
  data() {
    return {
			imgWechatUrl:this.imgWechatUrl,
      rulers: {}, //规则说明
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      bgColor: this.$store.state.themeColor,
      userInfo: {},
      distributionData: {},
      dataContetn: {},
      couponModel: false
    };
  },
  onShow() {
    this.userInfo = global.userInfo || {};
    if (!global.token) {
      this.back();
    } else {
      this.getIndeContent();
    }
  },
  onPullDownRefresh() {
    this.userInfo = global.userInfo || {};
    if (!global.token) {
      this.back();
    } else {
      this.getIndeContent();
    }
  },
  methods: {
    // 主数据列表
    getIndeContent() {
      this.$api
        .post(global.apiUrls.postDistributionIndex, {
          user_id: global.userInfo.id || 0
        })
        .then(res => {
          console.log('主数据', res);
          if (res.data.code == 1) {
            this.distributionData = res.data.data;
          } else {
            this.$message.info(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 返回
    back() {
      uni.navigateBack();
    },
    // 首页数据
    handleMoney() {
      this.$api
        .post(global.apiUrls.postDistributionRuler, {
          user_id: global.userInfo.id || 0,
          category_id: 17
        })
        .then(res => {
          console.log('规则说明', res);
          if (res.data.code == 1) {
            this.rulers = res.data.data;
          } else {
            this.$message.info(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });

      this.couponModel = true;
    },
    handleClose() {
      this.couponModel = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  // background-color: #f8f8f9;
  .header {
    height: 350rpx !important;
    width: 100%;
    background: $theme;
    .tui-msg-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 5%;
      padding-top: 70rpx;
      .block-108 {
        width: 108rpx;
        min-width: 108rpx;
        height: 108rpx;
        min-height: 108rpx;
      }
    }
  }
  .content_data {
    // background-image: url('../../static/v.png');
    background-color: orange !important;
    // background-image: linear-gradient(to right, #ff9700, #ed1c24) !important;
    // background: linear-gradient(180deg, rgba(255, 187, 42, 0.8) 0%, rgba(255, 166, 38, 1) 100%);
    // background: linear-gradient(360deg, rgba(255, 71, 24, 1)  0%, rgba(255, 187, 42, 1) 100%) !important;
    height: 350rpx;
    margin: 50rpx;
    background-color: white;
    position: relative;
    top: -180rpx;
    border-radius: 20rpx;
    padding: 50rpx;
    .current_desc {
      line-height: 50rpx;
      height: 50rpx;
    }
    .current_money {
      line-height: 60rpx;
      height: 60rpx;
      font-size: 45rpx;
    }
    .data {
      padding-top: 30rpx;
      .desc {
        line-height: 50rpx;
        height: 50rpx;
      }
      .money {
        font-size: 45rpx;
      }
    }
  }
  .content-center {
    width: 90%;
    margin-left: 5%;
    .wrapper {
      display: flex;
      grid-template-columns: 33.33% 33.33% 33.33%;
      position: relative;
      top: -220rpx;
      .box-block {
        margin-top: 40rpx;
        margin-left: 3%;
        width: 33%;
        background: white;
        height: 180rpx;
        padding: 40rpx 0;
        border-radius: 20rpx;
        text-align: center;
        image {
          width: 70rpx;
          height: 70rpx;
        }
        .desc {
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          white-space: nowrap; /*规定文本不换行**/
        }
      }
    }
  }
}
.bottom-action {
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  bottom: calc(32rpx + constant(safe-area-inset-bottom));
  bottom: calc(32rpx + env(safe-area-inset-bottom));
}
.shop_btn {
  position: absolute;
  right: 0;
  top: 140rpx;
  border-radius: 20rpx 0 0rpx 20rpx;
  color: $fu-main-color;
  // background: rgba(255,255,255,0.65);
  background: white;
  padding: 10rpx;
  font-size: $uni-font-size-sm;
  margin-top: -1.5em;
}
.model-notice-box {
  width: 600rpx;
  background-color: #fdf7e9;
  min-height: 600rpx;
  max-height: 1000rpx;
  overflow-y: scroll;
  .title {
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    // font-weight: bold;
    // color: rgba(206, 133, 45, 1);
  }
}
  .content {
    padding: 0 32rpx 20rpx;
    color: #666666;
    font-size: 28rpx;
    margin: 0 auto;

    .desc {
      display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
      -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
      text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
      -webkit-line-clamp: 1;
      overflow: hidden;
      min-height: 40rpx;
      width: 400rpx;
      text-align: left;
      margin: 0 auto;
      line-height: 40rpx;
    }

	}

 // 规则弹窗
  .rule-box{
    width: 100%;
    height: 100%;
    background-color: #0062CC;
    background: linear-gradient(top,#fcf9df,#fff0c4);
    .rule-box-title{
      height: 100rpx;
      font-size: 36rpx;
      line-height: 100rpx;
      text-align: center;
      font-weight: bold;
      color: #3b2204;
    }
    .rule-box-content{
      height: calc(100% - 200rpx);
      color: #615013;
      padding: 20rpx;
    }
    .rule-box-close{
      height: 100rpx;
      font-size: 32rpx;
      line-height: 100rpx;
      text-align: center;
      color: #615013;
    }
  }
</style>
